import React, {useCallback, useEffect, useState} from "react"
import {getGoodsDetail, GoodsDetail, updateGoods} from "../../apis/GoodsApi";
import {Button, Descriptions} from "antd";
import {observerDashboardPageWrapper} from "./ObserverDashboardPageWrapper";
import {OffsetDateTime} from "@js-joda/core";
import {Link} from "react-router-dom";
import LazyTabs from "../../components/LazyTabs";
import {DATE_WITH_TIME_FORMATER} from "../../utils/Date";
import {EditOutlined} from "@ant-design/icons";
import employeeAuthorizationStore from "../../store/EmployeeAuthorizationStore";
import SubGoodsTable from "../SubGoodsTable";

export interface GoodsDetailPageProps {
    id: number
}

const GoodsDetailPage: React.FC<GoodsDetailPageProps> = ({id}) => {
    const [goods, setGoods] = useState<GoodsDetail>()
    const query = useCallback(() => {
        getGoodsDetail(id).then(res => {
            setGoods(res.data)
        })
    }, [id]);
    useEffect(() => {
        query()
    }, [query])
    const [openEditDrawer, setOpenEditDrawer] = useState(false)
    return (
        <>
            <Descriptions title={"商品信息"}>
                <Descriptions.Item label={"名称"}>{goods?.name}</Descriptions.Item>
                <Descriptions.Item label={"条码"}>{goods?.barcode}</Descriptions.Item>
                <Descriptions.Item label={"零售价"}>{goods?.price}</Descriptions.Item>
                <Descriptions.Item label={"库存"}>{goods?.amount}</Descriptions.Item>
                <Descriptions.Item label={"箱规"}>{goods?.boxSpecification ?? "无"}</Descriptions.Item>
                <Descriptions.Item
                    label={"创建时间"}>{goods ? goods.createdDateTime.format(DATE_WITH_TIME_FORMATER) : ""}</Descriptions.Item>
            </Descriptions>
            <Descriptions>
                <Descriptions.Item label={"品牌"}>{goods?.brand?.name ?? "无"}</Descriptions.Item>
                <Descriptions.Item label={"类型"}>{goods?.category?.name ?? "无"}</Descriptions.Item>
                <Descriptions.Item label={"厂商"}>{goods?.factory?.name ?? "无"}</Descriptions.Item>
                {goods?.lastCheckInventoryRecordItem ? <>
                    <Descriptions.Item
                        label={<Link
                            to={`/checkInventoryRecords/${goods.lastCheckInventoryRecordItem.checkInventoryRecordId}`}>最后一次盘点</Link>}>时间：{goods.lastCheckInventoryRecordItem.createdDateTime.format(DATE_WITH_TIME_FORMATER)}&nbsp;&nbsp;&nbsp;&nbsp;数量：{goods.lastCheckInventoryRecordItem.amount}</Descriptions.Item>
                </> : null}
            </Descriptions>
            <Descriptions>
                {goods?.units?.length &&
                    <Descriptions.Item label={"基本单位"}>{goods?.units?.[0]?.name}</Descriptions.Item>}
                {(goods?.units?.length ?? 0) >= 1 && (goods?.units?.slice(1) ?? []).map((e, index) => {
                    return <Descriptions.Item
                        label={`辅助单位${index + 1}`}>{e.name}={e.basicMultiple}{goods?.units?.[0]?.name}</Descriptions.Item>
                })}
            </Descriptions>
            <Descriptions>
                {goods?.recordFilingNumber &&
                    <Descriptions.Item label={"备案编号"}>{goods?.recordFilingNumber}</Descriptions.Item>}
                {goods?.registrationCertificateNumber &&
                    <Descriptions.Item label={"注册证编号"}>{goods?.registrationCertificateNumber}</Descriptions.Item>}
                {goods?.executiveStandard &&
                    <Descriptions.Item label={"执行编号"}>{goods?.executiveStandard}</Descriptions.Item>}
            </Descriptions>
            {goods?.note && <Descriptions layout={"vertical"}>
                <Descriptions.Item label={"备注"}>{goods.note}</Descriptions.Item>
            </Descriptions>}
            {!!goods&&<LazyTabs lazyItems={[
                goods.subGoodsList.length &&
                {
                    key: "sub",
                    label: `子货品${!!goods?.subGoodsList?.length ? `(${goods?.subGoodsList?.length})` : ""}`,
                    render: () => {
                        return <SubGoodsTable data={goods?.subGoodsList ?? []}/>
                    }
                },
                {
                    key: "sale", label: "销售情况", render: () => <>
                        <h4>销售情况统计....</h4>
                    </>
                },

            ].filter(it => !!it).map(it => it!!)} defaultActiveKey={"sub"}/>}
        </>
    )
}

export default observerDashboardPageWrapper(GoodsDetailPage, "goods/{id}", "商品详情")


